<script setup>
import { ref } from 'vue'
import IconSelector from './components/IconSelector.vue'

// 响应式数据
const basicIcon = ref('Search')
const advancedIcon = ref('')
const disabledIcon = ref('Setting')
const customIcon = ref('')
const iconFontIcon = ref('')

// 自定义分类
const customCategories = [
  {
    name: 'common',
    label: '常用图标',
    icons: [
      'Search', 'Edit', 'Delete', 'Plus', 'Minus', 'Check', 'Close',
      'ArrowLeft', 'ArrowRight', 'Upload', 'Download', 'Star', 'Heart'
    ]
  },
  {
    name: 'business',
    label: '商务图标',
    icons: [
      'User', 'Setting', 'Bell', 'Message', 'Calendar', 'Clock',
      'Briefcase', 'Document', 'Folder', 'Chart', 'Trophy', 'Medal'
    ]
  }
]

// 阿里图标库配置
const iconFontUrl = '//at.alicdn.com/t/c/font_5008050_t1b5chdd67c.js'
const iconFontIcons = [
  'icon-send-filled', 'icon-nav-arrow-right', 'icon-nav-arrow-left', 'icon-nav-arrow-down', 'icon-nav-arrow-up',
  'icon-fast-arrow-down', 'icon-microphone', 'icon-dish-cover', 'icon-glass-cup', 'icon-check-circle',
  'icon-wifi', 'icon-bath', 'icon-frame', 'icon-shower-gel',
  'icon-a-washingmachine', 'icon-live', 'icon-user'
]

// 事件处理
const handleIconChange = (value, type) => {
  console.log(`${type} 图标已更改:`, value)
}
</script>

<template>
  <div class="demo-container">
    <div class="header">
      <h1>Vue 3 图标选择器组件示例</h1>
      <p>基于 Element Plus 的高性能图标选择器组件</p>
    </div>

    <div class="demo-sections">
      <!-- 基础使用 -->
      <el-card class="demo-card">
        <template #header>
          <h2>基础使用</h2>
        </template>
        <div class="demo-item">
          <label>选择图标：</label>
          <IconSelector v-model="basicIcon" placeholder="请选择一个图标" style="width: 300px;"
            @change="(value) => handleIconChange(value, '基础')" />
          <div v-if="basicIcon" class="result">
            <span>已选择：</span>
            <el-icon>
              <component :is="basicIcon" />
            </el-icon>
            <code>{{ basicIcon }}</code>
          </div>
        </div>
      </el-card>

      <!-- 高级配置 -->
      <el-card class="demo-card">
        <template #header>
          <h2>高级配置</h2>
        </template>
        <div class="demo-item">
          <label>显示图标名称，自定义分类：</label>
          <IconSelector v-model="advancedIcon" :categories="customCategories" placeholder="从自定义分类中选择"
            style="width: 400px;" @change="(value) => handleIconChange(value, '高级')" />
          <div v-if="advancedIcon" class="result">
            <span>已选择：</span>
            <el-icon>
              <component :is="advancedIcon" />
            </el-icon>
            <code>{{ advancedIcon }}</code>
          </div>
        </div>
      </el-card>

      <!-- 阿里图标库演示 -->
      <el-card class="demo-card">
        <template #header>
          <h2>阿里图标库支持</h2>
        </template>
        <div class="demo-item">
          <label>阿里矢量图标库：</label>
          <IconSelector v-model="iconFontIcon" :icon-font-url="iconFontUrl" :icon-font-icons="iconFontIcons"
            :icon-font-prefix="'icon-'" placeholder="选择阿里图标" style="width: 400px;"
            @change="(value) => handleIconChange(value, '阿里图标')" />
          <div v-if="iconFontIcon" class="result">
            <span>已选择：</span>
            <el-icon>
              <component :is="iconFontIcon" />
            </el-icon>
            <code>{{ iconFontIcon }}</code>
          </div>
        </div>
      </el-card>

      <!-- 状态演示 -->
      <el-card class="demo-card">
        <template #header>
          <h2>状态演示</h2>
        </template>
        <div class="demo-grid">
          <div class="demo-item">
            <label>禁用状态：</label>
            <IconSelector v-model="disabledIcon" :disabled="true" placeholder="禁用状态" style="width: 250px;" />
          </div>
          <div class="demo-item">
            <label>不可清除：</label>
            <IconSelector v-model="customIcon" :clearable="false" placeholder="不可清除" style="width: 250px;"
              @change="(value) => handleIconChange(value, '不可清除')" />
          </div>
        </div>
      </el-card>

      <!-- 使用说明 -->
      <el-card class="demo-card">
        <template #header>
          <h2>使用说明</h2>
        </template>
        <div class="usage-info">
          <h3>特性</h3>
          <ul>
            <li>✅ 基于 Element Plus，样式统一</li>
            <li>✅ 支持所有 Element Plus 图标</li>
            <li>✅ 支持阿里巴巴矢量图标库</li>
            <li>✅ 搜索过滤功能</li>
            <li>✅ 自定义分类支持</li>
            <li>✅ 分页懒加载，性能优化</li>
            <li>✅ 键盘导航</li>
            <li>✅ 代码量减少 78%</li>
          </ul>

          <h3>基础用法</h3>
          <pre><code>&lt;IconSelector v-model="selectedIcon" placeholder="请选择图标" /&gt;</code></pre>

          <h3>高级用法</h3>
          <pre><code>&lt;IconSelector
        v-model="selectedIcon"
        :categories="customCategories"
        :show-icon-name="true"
        :clearable="false"
        @change="handleChange"
        /&gt;</code></pre>

          <h3>阿里图标库用法</h3>
          <pre><code>&lt;IconSelector
        v-model="selectedIcon"
        :icon-font-url="'//at.alicdn.com/t/c/font_xxx.js'"
        :icon-font-icons="['icon-home', 'icon-user']"
        :icon-font-prefix="'icon-'"
        placeholder="选择阿里图标"
        /&gt;</code></pre>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.header p {
  color: #7f8c8d;
  font-size: 16px;
}

.demo-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.demo-card :deep(.el-card__header) {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.demo-card h2 {
  margin: 0;
  color: #495057;
  font-size: 18px;
}

.demo-item {
  margin-bottom: 20px;
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #495057;
}

.result {
  margin-top: 10px;
  padding: 8px 12px;
  background: #e3f2fd;
  border-radius: 4px;
  border-left: 4px solid #2196f3;
  display: flex;
  align-items: center;
  gap: 8px;
}

.result code {
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Monaco', 'Consolas', monospace;
  color: #e91e63;
}

.usage-info h3 {
  color: #495057;
  margin-top: 20px;
  margin-bottom: 10px;
}

.usage-info ul {
  padding-left: 20px;
}

.usage-info li {
  margin-bottom: 5px;
  color: #6c757d;
}

.usage-info pre {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid #007bff;
  overflow-x: auto;
}

.usage-info code {
  font-family: 'Monaco', 'Consolas', monospace;
  color: #495057;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-container {
    padding: 10px;
  }

  .demo-grid {
    grid-template-columns: 1fr;
  }
}
</style>
